{% extends "base.html" %} {% block title %}添加健康知识文章 - 运动健康管理系统{%
endblock %} {% block content %}
<div class="container py-5">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="{{ url_for('admin_dashboard') }}">管理员仪表盘</a>
      </li>
      <li class="breadcrumb-item">
        <a href="{{ url_for('admin_knowledge') }}">健康知识管理</a>
      </li>
      <li class="breadcrumb-item active" aria-current="page">添加文章</li>
    </ol>
  </nav>

  <h1 class="mb-4"><i class="bi bi-journal-plus"></i> 添加健康知识文章</h1>

  <div class="card shadow">
    <div class="card-body">
      <form method="POST" action="{{ url_for('admin_add_knowledge') }}">
        <div class="mb-3">
          <label for="title" class="form-label">文章标题</label>
          <input
            type="text"
            class="form-control"
            id="title"
            name="title"
            required />
        </div>
        <div class="mb-3">
          <label for="category" class="form-label">文章分类</label>
          <select class="form-select" id="category" name="category" required>
            <option value="">请选择分类</option>
            <option value="饮食健康">饮食健康</option>
            <option value="运动健身">运动健身</option>
            <option value="心理健康">心理健康</option>
            <option value="疾病预防">疾病预防</option>
            <option value="生活方式">生活方式</option>
            <option value="其他">其他</option>
          </select>
        </div>
        <div class="mb-3">
          <label for="content" class="form-label">文章内容</label>
          <textarea
            class="form-control"
            id="content"
            name="content"
            rows="15"></textarea>
        </div>
        <div class="d-flex justify-content-end">
          <a
            href="{{ url_for('admin_knowledge') }}"
            class="btn btn-secondary me-2"
            >取消</a
          >
          <button type="submit" class="btn btn-primary">保存文章</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %} {% block extra_js %}
<script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
<script>
  let editor;
  ClassicEditor.create(document.querySelector("#content"))
    .then((newEditor) => {
      editor = newEditor;

      // 替换表单提交处理
      const form = document.querySelector("form");
      const submitBtn = document.querySelector('button[type="submit"]');

      submitBtn.addEventListener("click", function (e) {
        e.preventDefault();

        // 获取标题值
        const title = document.querySelector("#title").value;
        if (!title) {
          alert("请输入文章标题");
          return;
        }

        // 获取编辑器内容
        const content = editor.getData();
        if (!content) {
          alert("请输入文章内容");
          return;
        }

        // 设置textarea的值
        document.querySelector("#content").value = content;

        // 提交表单
        form.submit();
      });
    })
    .catch((error) => {
      console.error(error);
    });
</script>
{% endblock %}
